<!doctype html>
<html lang="zh-cn">
	<head>
		<title>纵向选项卡</title>
		<meta charset="utf-8">
		<style>
		body{
			text-align: center;
		}
			#public{
				width:5%;
				height:200px;
				float:left;
			}
			#count{
				width:18%;
				height:200px;
				float:left;
				background-color:pink;

				
			}
			.text{
				display:none;
			}
			#public input{
				margin-top:10px;
				margin-bottom:10px;
			}
			.active{
				background-color:yellow;
			}
		</style>
		<script>
			window.onload=function(){
				var odiv=document.getElementById('count');
				var ain=document.getElementsByTagName('input');
				var adiv=odiv.getElementsByTagName('div')
				for(var i=0;i<ain.length;i++)
				{
					ain[i].index=i;
					ain[i].onclick=function()
					{for(var j=0;j<ain.length;j++)
					{
						ain[j].className='';
						adiv[j].style.display="none";

					}
					this.className='active';
					adiv[this.index].style.display="block";

				}
				}

			}
		</script>
		
	</head>
	<body>
	
		<div id="public">
			<input class="active" type="button"  value="综艺"/>
			<input type="button" value="电影"/>
			<input type="button" value="新闻"/>
			<input type="button" value="电视剧"/>
		</div>
		<div id="count">
		<div class="text" style="display:block;">新世界百货触网胜算几何
目前暂定北京地区仅新世界百货崇文门店、上海一家门店以及时尚生活概念品牌LOL参与其中。.</div>
		<div class="text">　民警查看报警人手机，上面有支付宝，就问王女士是不是经常使用支付宝。王女士突然醒悟，称自己不会手机支付，但15岁女儿果果很懂手机，自己的银行卡就是绑定在果果手机上。</div>
		<div class="text">果果事后向民警说，2月12日她在网上看见一条信息：转发一条说说就可领取一部苹果6S。对方先说要得手机需收取58元快递费，又说要收保证金……一套行骗组合拳套下来，小姑娘被套走4万元。</div>
		<div class="text">　猫头鹰在我国大约有26种，均属国家二级保护动物，是现存鸟类种在全世界分布最广的鸟类之一。就是这么可爱的猫头鹰，广西贺州一男子在捕捉到一只猫头鹰后，竟想卖了赚钱，没想到最终自食恶果。2月27日，贺州市八步区人民法院对该起非法猎捕珍贵、濒危野生动物罪案件进行一审宣判，判处被告人刘某有期徒刑一年，缓刑一年，并处罚金人民币两千元。</div>
		</div>
	</body>
</html>